<script lang="ts" setup>
import { ref,onMounted } from 'vue'
import {getUserInfoAPI} from '@/API/user'
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router';
const router = useRouter()
const userStore = useUserStore()

const infos = ref<any>({})

onMounted( async() => {
const res:any= await  getUserInfoAPI(userStore.info.userid)

if(res.code==200) {
  infos.value = res.data[0]
}


})

const exit=()=>{
  userStore.exitLogin()
  
}

//点击返回到上一页面
const onClickLeft = () => history.back()
</script>

<template>
  <van-nav-bar title="个人中心" class="bgc" fixed left-text="返回" left-arrow @click-left="onClickLeft" />
  <div v-if="userStore.info.token" >
    <div class="info">
    <van-image
  round
  width="4rem"
  height="4rem"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<span>{{ infos.nickname }}</span>
  </div>
  <van-divider
  :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
>
  设置
</van-divider>
  <van-cell icon="location-o" title="地址管理" is-link to="/address" />
  <van-cell icon="location-o" title="卡卷红包" is-link to="index" />
  <van-cell icon="location-o" title="关于手机" is-link to="index" />
  <van-cell @click="exit" icon="location-o" title="退出" is-link to="" />

  </div>
  

  <div v-else class="empty">
    <van-empty image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="160" @click="router.push('/login')" description="请登录" />
  </div>
  
</template>

<style scoped lang="less">
.empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  
}
.info{
  margin-bottom: 50px;
  display: flex;
  align-items: center;
  background-color: pink;
  margin-top: 46px;
  padding: 0 16px;
}
.bgc{
  background-color: gainsboro;
}
</style>
